<template>
	<view class="content">
		<view>
		    <head-list @refresh-page="refreshCurrentPage" :changing="1"></head-list>
		</view>

		<scroll-view scroll-x class="bg-Midnight-Blue nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-cyan curtext':'text-white'"
				v-for="(item,index) in classification" :key="index" @tap="tabSelect" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>

		<view class="title"> {{title}}
			<view class="title_bottom"></view>
		</view>

		<view v-if="livetype==2 && !checkstatus">
			<view class="info_title">
				<view class="info_title_image" v-if="liveInfo.live_url">
					<video class="info_title_img" :src="liveInfo.live_url" controls></video>
				</view>
				<view class="info_title_image" v-else>
					<image class="info_title_img" :src="liveInfo.image"></image>
				</view>
				<view class="info_titles">
					<view class="info_titles1">
						{{liveInfo.title}}
					</view>

					<view style="display: flex;align-items: center;justify-content: center;">
						<view class="info_titles2">
							<view class="info_titles2_first" style="width: 170rpx;">
								<text style="padding-left: 10rpx;">立即报名</text>
							</view>
						</view>

						<view class="info_titles2_second cuIcon-post" v-if="liveInfo.rating === 0">
							<view class="Points_button" @tap="showModal($event)" data-target="menuModal">
								<text style="padding-left: 10rpx;">评价</text>
							</view>
						</view>

						<view class="info_titles2_second cuIcon-post" style="color:#191919;" v-else>
							<view class="Points_button" data-target="menuModal">
								<text style="padding-left: 10rpx;color:#191919;">评价</text>
							</view>
						</view>

						<view class="cu-modal" :class="modalName=='menuModal'?'show':''" @tap="hideModal">
							<view class="cu-dialog" @tap.stop>
								<view class="cu-list menu text-left solid-top">
									<view
										style="padding: 20rpx 0 30rpx 30rpx;font-size: 40rpx;font-weight: 600;color:#000;">
										评价</view>
									<view style="padding: 20rpx 0 30rpx 30rpx;margin: auto;">
										<fui-rate allowHalf @change="change" :touchable="false"></fui-rate>
									</view>
								</view>
							</view>
						</view>
					</view>


				</view>
			</view>

			<view style="width: 90%;margin: auto;">
				<text style="color: #fff;font-size: 45rpx;font-weight: 600;">评论</text>
				<text style="color: #fff;font-size: 30rpx;padding-left: 15rpx;">尽情愉快的评论吧</text>
			</view>
			<view class="introduce" v-for="(item,index) in live_comment.list" :key="index">
				<view class="introduce_comment">
					<view class="introduce_first">
						<view
							style="font-size: 35rpx;color: #1EEBE6;display: flex;justify-content: left;align-items: center;">
							<view style="font-size: 80rpx;">
								<view class="cu-avatar round margin-left"
									:style="{'background-image':'url('+ item.user.avatar +')'}"></view>
							</view>
							<view style="margin-left: 20rpx;padding-top: 15rpx;">
								<view>{{item.user.username}}</view>
								<view>{{item.createtime}}</view>
							</view>
						</view>

					</view>
					<view class="introduce_second" style="margin-top: 15rpx;">

						<rich-text style="color: #fff;" :nodes="item.content_text"></rich-text>

						<view>
							<image style="width: 26%;height: 200rpx;margin-left: 30rpx;" :src="img"
								v-for="(img,index3) in item.content_files_img" :key="index3"
								@click="tankuang(img,item.content_files_img)"></image>
						</view>

					</view>
				</view>
			</view>

			<view class="flex p-xs margin-bottom-sm mb-sm" style="margin-top: 20rpx;">
				<view class="flex-quadruple padding-sm margin-xs radius" style="padding-right: 0;">
					<view class='headimg1'>
						<image style="width: 100%;height: 100%;border-radius: 100rpx;" :src="userinfo.avatar"></image>
					</view>
				</view>

				<view class="flex-sub padding-sm margin-xs radius" style="padding-left: 0;position: relative;">
					<input class="inputstyle" v-model="text" placeholder="友善评论" style="padding-right: 80rpx;"></input>
					<image style="width: 50rpx;height:50rpx;position: absolute;top:30rpx;right: 30rpx;z-index:999;"
						@click="ChooseImage()" src="@/static/upimg.png"></image>
				</view>

				<view style="padding: 20rpx 20rpx 0 0;font-size: 40rpx;color: #fff;margin-top: 18rpx;" @click="submit">
					发送
				</view>
			</view>
			<view style="width: 100%;height: 200rpx;" v-if="imgLists.length > 0">
				<view style="display: inline-block;position: relative;" v-for="(img,index2) in imgLists" :key="index2">
					<image style="width: 160rpx;height: 160rpx;float: left;padding-left: 20rpx;" :src="img"></image>
					<image style="width: 30rpx;height: 30rpx;position: absolute;top: -15rpx;right: -15rpx;"
						@click="delimg_update(index2)" src="@/static/close.png"></image>
				</view>
			</view>
		</view>
		<view :style="{ height: video_type == 1 ? '60vh' : '' }">
			<view style="width: 90%;margin: 30rpx auto;">
				<text style="color: #fff;font-size: 45rpx;font-weight: 600;">推荐</text>
				<text style="color: #fff;font-size: 30rpx;padding-left: 15rpx;">根据您的兴趣为您推荐</text>
			</view>

			<view style="width: 95%;height: 450rpx;margin: 20rpx auto 0;">
				<fui-horizontal-scroll background="rgba(255, 43, 43, .08)" scrollBarColor="#FF2B2B">
					<view class="fui-list">
						<view class="fui-list--item" v-for="(item,index) in goodsList.liveList" :key="index"
							style="width: 340rpx;height: 460rpx;border: 4rpx #3077AF solid;border-radius: 16rpx;"
							@click="broadcast(2,item.id,item.is_member_expire,item.channels_id)">
							<image style="width: 320rpx;height: 300rpx;padding: 10rpx;border-radius: 16rpx;"
								:src="item.image"></image>
							<view class="video_info">
								<view class="video_info1">
									{{item.title}}
								</view>
								<view class="video_info2">
									<rich-text style="color: #fff;" :nodes="item.description"></rich-text>
								</view>
								<view class="video_info3">
									￥ {{item.membership_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</fui-horizontal-scroll>
			</view>
		</view>


		<view style="width: 100%;height: 300rpx;"></view>
	</view>
</template>

<script>
	import HeadList from '@/components/head.vue';
	import user from '@/api/user.js';
	import forum from '@/api/forum.js';
	import {
		img_upload
	} from '@/common/config'
	export default {
		components:{
			HeadList
		},
		data() {
			return {
				goodsList: [],
				text: '',
				token: '',
				TabCur: 0,
				scrollLeft: 0,
				title: uni.getStorageSync('title'),
				rating: 3.5,
				livetype: 1,
				liveid: 0,
				userinfo: [],
				buttonText: '00:10:00',
				countdownInterval: null,
				countdown: 600,
				minute: '',
				liveInfo: [],
				live_comment: [],
				modalName: null,
				video_type: 1,
				video_url: '',
				image: '',
				modalName1: null,
				swiperList: [],
				herald: [],
				dotStyle: false,
				classification: [],
				imgLists: [],
				file_img: [],
				fid: [],
				checkstatus:uni.getStorageSync('checkstatus')
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			this.token = token
			if (token == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.livetype = uni.getStorageSync('livetype');
			this.liveid = uni.getStorageSync('liveid');
			this.fetchData(1)
		},
		onShareAppMessage() {
			return {
				title: '复盘',
				path: '/page/index/index',
				imageUrl: '/static/logo.png'
			}
		},
		methods: {
			refreshCurrentPage() {
				this.fetchData(2)
			},
			//图片预览
			tankuang(url, arr) {
				uni.previewImage({
					current: url,
					urls: arr,
					loop: true,
				});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 3, //默认9 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							this.uploadFile(res.tempFilePaths[i]);
						}
					}
				});
			},
			uploadFile(filePath) {
				uni.uploadFile({
					url: img_upload,
					filePath: filePath,
					name: 'file',
					formData: {
						'user': 'test',
						'token': this.token
					},
					success: (uploadRes) => {
						const responseObject = JSON.parse(uploadRes.data);
						if (responseObject.code == 403) {
							uni.showToast({
								title: responseObject.msg,
								icon: 'error'
							})
						} else {
							if (this.imgLists.length < 3) {
								console.log(responseObject)
								this.imgLists.push(responseObject.data.fullurl)
								this.file_img.push(responseObject.data.url)
							} else {
								uni.showToast({
									title: '最多上传三张照片',
									icon: 'none'
								})
							}
						}
					},
					fail: (error) => {
						console.log(error);
					}
				});
			},
			delimg_update(e) {
				this.imgLists.splice(e, 1);
				this.file_img.splice(e, 1);
			},
			fetchData(status) {
				user.getUserDetails({
					token: this.token
				}).then(res => {
					this.userinfo = res.data
				});
				forum.getLiveshow({
					token: this.token,
					category_type: 'live',
					id: this.liveid,
				}).then(res => {
					if (res.code == 1) {
						this.liveInfo = res.data.liveInfo
					}
				})
				forum.AlbumComment({
					token: this.token,
					aid: this.liveid,
					type: 'live',
				}).then(res => {
					let data = res.data
					for (let i = 0; i < data['list'].length; i++) {
						if (data['list'][i]['content_files'] != '') {
							const imageUrlArray = data['list'][i]['content_files'].split(',');
							data['list'][i]['content_files_img'] = imageUrlArray
						} else {
							data['list'][i]['content_files_img'] = []
						}
					}
					this.live_comment = data
				});

				this.channels_id = 6
				this.category_type = 'live'
				forum.getCategoryList({
					token: this.token,
					channels_id: this.channels_id
				}).then(res => {
					console.log(res.data)
					this.classification = res.data
					if(status == 1){
						this.fid = res.data[0]['id']
					}
					if(livetype == 2){
						this.fid = uni.getStorageSync('channels_id');
					}
					
					console.log(this.fid,999)
					return
					
					uni.setStorageSync('fid',this.fid);
					uni.setStorageSync('fid_type','live_category');
					forum.forumindex({
						token: this.token,
						category_id: this.fid,
						category_type: 'live',
						type: 4,
					}).then(res => {
						if (res.msg == "尚未开通会员") {
							this.goodsList = []
							uni.showModal({
								title: '会员',
								content: '开通会员',
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/membership/membership'
										})
									}
								}
							})
						} else {
							this.goodsList = res.data
						}
					})
				})


			},
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = seconds % 60;
				const formattedMinutes = String(minutes).padStart(2, '0');
				const formattedSeconds = String(remainingSeconds).padStart(2, '0');
				const formattedTime = `00:${formattedMinutes}:${formattedSeconds}`;
				return formattedTime;
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.fid = this.classification[this.TabCur].id
				this.fid_type = 'live_category'
				uni.setStorageSync('fid', this.fid);
				uni.setStorageSync('fid_type', this.fid_type);
				forum.forumindex({
					token: this.token,
					category_id: this.classification[this.TabCur].id,
					category_type: 'live',
					type: 4,
				}).then(res => {
					if (res.msg == "尚未开通会员") {
						this.goodsList = []
						uni.showModal({
							title: '会员',
							content: '开通会员',
							cancelText: '取消',
							confirmText: '确定',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/membership/membership'
									})
								}
							}
						})
					} else {
						this.goodsList = res.data
					}
				})
				this.livetype = 1
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			myinfo() {
				uni.navigateTo({
					url: '/pages/index/myinfo'
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			change(e) {
				uni.showModal({
					title: '评价',
					content: '确定要打' + e.score + '分吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							forum.addRating({
								table_name: 'live',
								object_id: this.liveInfo.id,
								score: e.score,
							}).then(res => {
								if (res.code == 1) {
									console.log(res)
									this.fetchData(2)
								}
							})
							this.modalName = null
						}
					}
				})
			},
			video_look(url, img) {
				console.log(url, img)
				this.video_url = url
				this.image = img
				this.video_type = 2
			},
			submit() {
				let content = this.text
				if (content.length > 140) {
					uni.showToast({
						title: '字数不能超过140',
						icon: 'error'
					})
					return
				}
				if (this.file_img && this.file_img.length > 0) {
					for (let i = 0; i < this.file_img.length; i++) {
						content += `![Image Description](${this.file_img[i]})`
					}
				}
				forum.addComment({
					token: this.token,
					type: 'live',
					aid: this.liveid,
					content: content,
					pid: 0,
					top_pid: 0,
					con: this.text,
					image: this.imgLists,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						})
						this.text = ''
						this.file_img = []
						this.imgLists = []
						this.fetchData(2)
					}
				})
			},
			showModal1(e) {
				this.modalName1 = e.currentTarget.dataset.target
				forum.get_management({
					token: this.token,
				}).then(res => {
					if (res.code == 1) {
						this.swiperList = res.data
					}
				})
				forum.getLiveForeshow().then(res => {
					if (res.code == 1) {
						this.herald = res.data
					}
				})
			},
			hideModal1(e) {
				this.modalName1 = null
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			broadcast(type, id,is_member_expire,channels_id) {
				uni.setStorageSync('livetype', type);
				uni.setStorageSync('liveid', id);
				uni.setStorageSync('channels_id', channels_id);
				uni.navigateTo({
					url: '/pages/index/livbroadcast'
				});
			}
		}
	}
</script>

<style>
	.inputstyle {
		height: 70rpx;
		border-radius: 100rpx;
		border: 3rpx white solid;
		background-color: white;
		padding-left: 30rpx;
		flex-grow: 1;
		overflow-y: auto;
	}
	
	.content {
		width: 100%;
		background-color: #112858;
	}

	.cuIcon-back {
		color: #fff;
	}

	.text {
		color: white;
		margin-left: 10rpx;
	}

	.bgwhite {
		background-color: #112858;
	}

	.curtext {
		width: 230rpx;
		text-align: center;
		border-radius: 100rpx;
		border: 4rpx cyan solid;
		background-image: linear-gradient(to right, #0b7284, #0e5070, #0b7284);
	}

	.title {
		width: 90%;
		height: 60rpx;
		font-size: 50rpx;
		font-weight: bold;
		text-align: left;
		padding-left: 10rpx;
		line-height: 50rpx;
		color: white;
		border-left: 15rpx #1eebe6 solid;
		margin: 50rpx 0 0 50rpx;
		z-index: 9999;
	}

	.title_bottom {
		width: 130rpx;
		height: 20rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(to right, #1794a4, #157088, #123962);
		margin-top: -10rpx;
		margin-left: 20rpx;
		z-index: 9998;
	}

	.info_title {
		width: 95%;
		height: 550rpx;
		background-color: #163762;
		border: 4rpx #3077AF solid;
		border-radius: 16rpx;
		margin: 20rpx auto;
	}

	.info_title_image {
		width: 95%;
		height: 360rpx;
		margin: 20rpx auto;
	}

	.info_title_img {
		width: 100%;
		height: 360rpx;
		border-radius: 16rpx;
	}

	.info_titles {
		width: 95%;
		height: 140rpx;
		margin: auto;
	}

	.info_titles1 {
		padding: 10rpx 0 10rpx 15rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.info_titles2 {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.info_titles2_first {
		width: 130rpx;
		height: 60rpx;
		background-color: #275EAD;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.info_titles2_second {
		width: 130rpx;
		height: 60rpx;
		color: #8BC3F0;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.introduce {
		width: 95%;
		border-radius: 12rpx;
		margin: 20rpx auto 50rpx;
	}

	.introduce_first {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.introduce_second {
		width: 95%;
		margin: auto;
		padding-bottom: 15rpx;
		padding-left: 20rpx;
	}

	.introduce_video {
		width: 98%;
		height: 100rpx;
		background-color: #1C416D;
		margin: 10rpx auto 0;
		border-radius: 16rpx;
		color: #fff;
		padding-left: 20rpx;
	}

	.introduce_video_text {
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		padding-left: 10rpx;
	}

	.introduce_comment {
		width: 98%;
		margin: 10rpx auto 0;
		border-radius: 16rpx;
		background-color: #1C416D;
	}

	.fui-list {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.fui-list--item {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
		margin-right: 24rpx;
	}

	.fui-mr--52 {
		margin-right: 52rpx;
	}

	.fui-list--item:last-child {
		margin-right: 0;
	}

	.fui-mtop {
		margin-top: 24rpx;
	}

	.video_info {
		width: 92%;
		height: 150rpx;
		margin: auto;
	}

	.video_info1 {
		font-size: 30rpx;
		font-weight: 600;
		color: #fff;
		padding: 5rpx 0 5rpx 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.video_info2 {
		color: #fff;
		padding: 5rpx 0 5rpx 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.video_info3 {
		font-size: 30rpx;
		color: #F4C044;
		padding: 5rpx 0 5rpx 10rpx;
	}

	.video_info3_text {
		font-size: 25rpx;
		color: #92A1B5;
		padding: 5rpx 0 5rpx 10rpx;
	}
</style>